<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 监听所有的按键：只要是按下键都会触发keyup函数 -->
        <input type="text" @keyup="keyup" />
        <br><br>
        <!--
            这里使用了修饰符：.enter 表示不是所有的按钮都监听只监听回车键
            注意：在Event对象中key的属性值是使用的是大写字母驼峰法表示的，比如：Enter，PageDown
                  在使用按键的修饰符时使用的是中画线方式，比如：enter，page-down
        -->
        <input type="text" @keyup.enter="keyup" />

        <br><br>
        <!--
            vue中还提供了一些特殊的系统按键修饰符，这些修饰符是配合其他键盘按键或鼠标按钮使用的，有如下些一些：
            1. ctrl      表示按下了ctrl键
            2. alt       表示按下了alt键
            3. shift     表示按下了shift键
            4. meta      表示按下了meta键
            如下所示按下ctrl+enter键时，触发keyup事件
            这里修饰符可以写为".ctrl.enter"或者".enter.ctrl"都可以 此时按下了ctrl + enter就可以，按下shift + ctrl + enter也可以
            如果我们只是想要精确地控制，必须是按钮ctrl + enter才行则可以在后面再加上.exact进行修饰
        -->
        <input type="text" @keyup.ctrl.enter.exact="keyup">

        <br><br>
        <!--
          鼠标的键也可以通过修饰符进行修饰，有三个修饰符：
          .left   左键
          .right   右键
          .middle   中间键
        -->
        <div @click.left="lclick">单击事件</div>


    </div>
<script>
    const {createApp} = Vue
    const config = {
        setup() {
            /* 通过接收事件对象中的key属性来判断用户是按的哪个键 */
            const keyup = (e) => {
                console.log(e.key)
            }

            const lclick = ()=>{
                console.log('左键单击')
            }
            return {keyup,lclick}
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>